// ECharts 图表配置和初始化

// ECharts 图表初始化
function initCharts() {
  if (typeof echarts === 'undefined') {
    console.error('ECharts not loaded');
    return;
  }

  console.log('ECharts loaded, initializing charts...');

  // 实时折线图
  initLineChart();
  
  // 3D饼图
  initPieChart();
  
  // 动态柱状图
  initBarChart();
  
  // 雷达图
  initRadarChart();
  
  // 仪表盘
  initGaugeChart();
  
  // 响应式调整
  initChartsResize();
}

// 实时折线图
function initLineChart() {
  const lineChart = echarts.init(document.getElementById('lineChart'));
  if (!lineChart) return;
  
  let lineData = [];
  let timeData = [];
  
  // 生成初始数据
  for (let i = 0; i < 20; i++) {
    timeData.push(new Date(Date.now() - (19 - i) * 1000).toLocaleTimeString());
    lineData.push(Math.floor(Math.random() * 1000) + 500);
  }
  
  const lineOption = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(30, 41, 59, 0.9)',
      borderColor: '#3B82F6',
      textStyle: { color: '#F8FAFC' }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: timeData,
      axisLine: { lineStyle: { color: '#64748B' } },
      axisLabel: { color: '#94A3B8' }
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#64748B' } },
      axisLabel: { color: '#94A3B8' },
      splitLine: { lineStyle: { color: '#334155' } }
    },
    series: [{
      data: lineData,
      type: 'line',
      smooth: true,
      lineStyle: { color: '#3B82F6', width: 3 },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(59, 130, 246, 0.3)' },
            { offset: 1, color: 'rgba(59, 130, 246, 0.05)' }
          ]
        }
      },
      symbol: 'circle',
      symbolSize: 6,
      itemStyle: { color: '#3B82F6' }
    }]
  };
  
  lineChart.setOption(lineOption);
  
  // 实时更新数据
  setInterval(() => {
    timeData.shift();
    lineData.shift();
    timeData.push(new Date().toLocaleTimeString());
    lineData.push(Math.floor(Math.random() * 1000) + 500);
    lineChart.setOption({
      xAxis: { data: timeData },
      series: [{ data: lineData }]
    });
  }, 2000);
  
  window.lineChart = lineChart;
}

// 3D饼图
function initPieChart() {
  const pieChart = echarts.init(document.getElementById('pieChart'));
  if (!pieChart) return;
  
  const pieOption = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(30, 41, 59, 0.9)',
      borderColor: '#10B981',
      textStyle: { color: '#F8FAFC' }
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: { color: '#F8FAFC' }
    },
    series: [{
      name: '技术栈',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['60%', '50%'],
      data: [
        { value: 35, name: 'Vue.js', itemStyle: { color: '#41B883' } },
        { value: 25, name: 'React', itemStyle: { color: '#61DAFB' } },
        { value: 20, name: 'TypeScript', itemStyle: { color: '#007ACC' } },
        { value: 15, name: 'Node.js', itemStyle: { color: '#339933' } },
        { value: 5, name: '其他', itemStyle: { color: '#8B5CF6' } }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        show: true,
        color: '#F8FAFC'
      }
    }]
  };
  
  pieChart.setOption(pieOption);
  window.pieChart = pieChart;
}

// 动态柱状图
function initBarChart() {
  const barChart = echarts.init(document.getElementById('barChart'));
  if (!barChart) return;
  
  const barOption = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(30, 41, 59, 0.9)',
      borderColor: '#8B5CF6',
      textStyle: { color: '#F8FAFC' }
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
      axisLine: { lineStyle: { color: '#64748B' } },
      axisLabel: { color: '#94A3B8' }
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#64748B' } },
      axisLabel: { color: '#94A3B8' },
      splitLine: { lineStyle: { color: '#334155' } }
    },
    series: [{
      data: [120, 200, 150, 80, 70, 110],
      type: 'bar',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [
            { offset: 0, color: '#8B5CF6' },
            { offset: 1, color: '#3B82F6' }
          ]
        }
      },
      emphasis: {
        itemStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: '#A855F7' },
              { offset: 1, color: '#3B82F6' }
            ]
          }
        }
      }
    }]
  };
  
  barChart.setOption(barOption);
  window.barChart = barChart;
}

// 雷达图
function initRadarChart() {
  const radarChart = echarts.init(document.getElementById('radarChart'));
  if (!radarChart) return;
  
  const radarOption = {
    backgroundColor: 'transparent',
    tooltip: {
      backgroundColor: 'rgba(30, 41, 59, 0.9)',
      borderColor: '#EAB308',
      textStyle: { color: '#F8FAFC' }
    },
    radar: {
      indicator: [
        { name: 'HTML', max: 100 },
        { name: 'CSS', max: 100 },
        { name: 'JavaScript', max: 100 },
        { name: 'Vue', max: 100 },
        { name: 'React', max: 100 },
        { name: 'Node.js', max: 100 }
      ],
      name: {
        textStyle: { color: '#F8FAFC' }
      },
      splitArea: {
        areaStyle: {
          color: ['rgba(250, 250, 250, 0.05)', 'rgba(200, 200, 200, 0.02)']
        }
      },
      axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.2)' } },
      splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } }
    },
    series: [{
      name: '技能评估',
      type: 'radar',
      data: [{
        value: [90, 85, 88, 80, 75, 70],
        name: '当前水平',
        itemStyle: { color: '#EAB308' },
        areaStyle: { color: 'rgba(234, 179, 8, 0.3)' }
      }]
    }]
  };
  
  radarChart.setOption(radarOption);
  window.radarChart = radarChart;
}

// 仪表盘
function initGaugeChart() {
  const gaugeChart = echarts.init(document.getElementById('gaugeChart'));
  if (!gaugeChart) return;
  
  const gaugeOption = {
    backgroundColor: 'transparent',
    tooltip: {
      backgroundColor: 'rgba(30, 41, 59, 0.9)',
      borderColor: '#EC4899',
      textStyle: { color: '#F8FAFC' }
    },
    series: [{
      name: '性能分数',
      type: 'gauge',
      radius: '85%',  // 增加仪表盘半径
      progress: { show: true },
      detail: { 
        valueAnimation: true, 
        formatter: '{value}%', 
        color: '#F8FAFC',
        fontSize: 16,  // 增加数值字体大小
        offsetCenter: [0, '40%']  // 调整数值位置
      },
      data: [{ value: 87, name: '' }],
      axisLine: {
        lineStyle: {
          width: 20,  // 减少轴线宽度，给内部留更多空间
          color: [
            [0.3, '#FF6B6B'],
            [0.7, '#4ECDC4'],
            [1, '#45B7D1']
          ]
        }
      },
      pointer: {
        itemStyle: { color: '#EC4899' },
        length: '70%',  // 调整指针长度
        width: 4  // 调整指针宽度
      },
      axisTick: { show: false },
      splitLine: {
        length: 12,  // 减少刻度线长度
        lineStyle: { width: 2, color: '#999' }
      },
      axisLabel: {
        distance: 35,  // 增加标签距离
        color: '#F8FAFC',
        fontSize: 11  // 调整标签字体大小
      },
      title: {
        offsetCenter: [0, '-40%'],  // 调整标题位置
        fontSize: 13,  // 调整标题字体大小
        color: '#F8FAFC'
      }
    }]
  };
  
  gaugeChart.setOption(gaugeOption);
  window.gaugeChart = gaugeChart;
}

// 响应式调整
function initChartsResize() {
  window.addEventListener('resize', () => {
    if (window.lineChart) window.lineChart.resize();
    if (window.pieChart) window.pieChart.resize();
    if (window.barChart) window.barChart.resize();
    if (window.radarChart) window.radarChart.resize();
    if (window.gaugeChart) window.gaugeChart.resize();
  });
}

// 导出到全局作用域
window.initCharts = initCharts;
